<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>列表渲染</title>
</head>
<body>
  <div id="root">
    <h2>列表渲染</h2>
    <hr>
    <div>
      <!-- 遍历数组 -->
      <!-- <ul v-for="p in persion" :key="p.id"> -->
      <ul v-for="p of persion" :key="p.id">
        <li>{{p.name}} ，年龄：{{p.age}}</li>
      </ul>
      <hr>
      <!-- 遍历对象 -->
      <ul v-for="(value,key) of persion[0]" :key="key">
        <li>{{ value }}</li>
      </ul>
      <hr>
      <!-- 遍历字符串 -->
      <ul v-for="(char,index) of 'hello'" :key="index">
        <li>第{{index}}字母为：{{ char }}</li>
      </ul>
      <hr>
      <!-- 遍历指定次数 -->
      <ul v-for="(char,index) of 4" :key="char+index+Math.random()">
        <li>{{ char }} ，索引为 {{index}}</li>
      </ul>

    </div>
  </div>
  <script type="text/javascript">
    const x= new Vue({
      el:'#root', 
      data:{ 
        persion: [
          {id:'sk9G2O01avD',name:'张三',age:'12'},
          {id:'k8F4Dl7m',name:'李四',age:'34'},
          {id:'oB5vA0Qmm1p',name:'杰克',age:'22'}
        ]
      }
    })
  </script>
</body>
</html>